<template>
  <Mainframe title='申请/审核记录列表'>
    <div>
      <el-row style="background-color:#fff;padding:10px">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '#' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/customer_manage' }">项目列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-row style="margin-top:20px">
      <el-table v-loading="loading"
          :data="tableData"
          style="display:flex;width: 100%; margin-bottom: 20px"
          row-key="applyId"
          default-expand-all
      >
        <el-table-column prop="applyId" label="申请单号" sortable style="max-width: 80px"/>
        <el-table-column prop="customerName" label="客户名称" sortable/>
        <el-table-column prop="lornType" label="计息方式" sortable>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ lornTypeTxt(scope.row.lornType) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="terms" label="贷款期限" sortable>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{scope.row.terms}}年</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="terms" label="年利率" sortable>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">5.1%</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="applyAmount" label="金额(元)" sortable/>
        <el-table-column prop="createDate" label="申请日期" sortable/>

        <el-table-column prop="auditDate" label="审核日期" sortable/>
        <el-table-column prop="status" label="状态" sortable>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ statusTxt(scope.row.status) }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" style="flex-grow: 1">
          <template #default="scope">

            <el-button  size="small"  type="primary" @click="viewDetail(scope.$index, scope.row)"
            >查看详情
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      </el-row>
    </div>
  </Mainframe>
</template>

<style scoped>
</style>

<script>


import {reactive, ref} from "vue";
import Mainframe from "@/components/mainframe/index.vue";
import {getApplyListData, auditDeny, auditOk, submitApply} from '@/saga/APi';

export default {
  name: 'ApplyHistory',

  setup() {
    const myHobbies =  reactive({
      tableData:[],
    });
    return {myHobbies}
  },
  mounted() {

    var loginJson = sessionStorage.getItem("loginedUser");
    this.loginer = JSON.parse(loginJson);

    const _getApplyListData = (() => {
      getApplyListData().then((response) => {

        console.table(response.data);
        this.tableData =  response.data;
        this.loading=false;
        // console.log('正常响应')
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })
    });

    _getApplyListData();

  },


  data() {
    return {
      loading:ref(this),
      loginer:{},
      tableData: [
        {
          applyId: 31,
          customerName: 'xiaoming',
          createDate: new Date(),
          auditDate: new Date(),
          lornType: 1,
          applyAmount: 1000.2,
          memo: '',
          status: 1
        }
      ],
    }

  },

  components: {
    Mainframe
  },

  methods: {

    statusTxt(value) {
      let statusMap = {
        'key-1':'初审拒绝',
        'key-2':'合规性审核拒绝',
        'key-3':'信贷审批拒绝',
        'key-4':'合同签订拒绝',
        'key-5':'贷款拒绝',
        'key-10':'自行取消',
        key0: '待初审',
        key1: '待合规性审核',
        key2: '待信贷审批',
        key3: '待签订合同',
        key4: '待贷款发放',
        key5: '贷款已发放',
        key6: '已存档/结束'
      };



      return statusMap['key' + value] || value;
    },

    lornTypeTxt(value) {
      let statusMap = {
        key1: '等额本息',
        key2: '等额本金',
      };
      return statusMap['key' + value] || value;
    },

    handleCancel(data) {
      console.log('mock cancel by self');

    },
    handleApprove (data) {
      console.log('mock approved!')
      auditOk(data).then((response) => {
        console.log('正常响应')
        console.log(response)
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })
    },

    handleDeny(data) {
      auditDeny(data).then((response) => {
        alert("审核拒绝");
        //tablefresh hot load .
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })
    },

    viewDetail(index, data) {

      console.log(data)
       this.$router.push({name:'applyDetail',query: {'applyId':data.applyId}});
    }

  }
}

</script>